<template>
  <el-container class="contain">
    <el-header class="header">
      <div>
        <img src="../../assets/logo.png">
        <span>影音资讯平台管理系统</span>
      </div>
      <div>
        <el-popover
          placement="top-start"
          width="200"
          trigger="hover">
          <el-row class="list" @click.native="$global.goPage('/adminInfo')">管理员信息</el-row>
          <el-row class="list" @click.native="logout">退出</el-row>
          <el-button slot="reference" class="admin_ava"></el-button>
        </el-popover>
      </div>

    </el-header>
    <el-container class="Admin_con">
      <el-aside width="200px":width="isCollapse ? '64px':'200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened
                 :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
          <el-submenu :index="item.id +''" v-for="item in menulist" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.authName}}</span>
            </template>
            <el-menu-item :index="'/'+subitem.path" v-for="subitem in item.children" :key="subitem.id"
            @click="saveActivepath('/'+subitem.path)">
              <template slot="title">
                <i :class="iconsObj[item.id]"></i>
                <span>{{subitem.authName}}</span>
              </template>
            </el-menu-item>
            </el-submenu>
        </el-menu>

      </el-aside>
      <el-main>
      <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
    export default {
        name: "home",
      data(){
          return{
            isCollapse:false,
            activePath:'',
            menulist:[
              {
                "id": 1,
                "authName": "首页",
                "path": null,
                "children": [
                  {
                    "id": 1-1,
                    "authName": "首页banner",
                    "path": 'banner'
                  },
                  {
                    "id": 1-2,
                    "authName": "热点消息",
                    "path": 'news'
                  }
                ]
              },
              {
                "id": 2,
                "authName": "用户信息管理",
                "path": null,
                "children": [
                  {
                    "id": 2-1,
                    "authName": "用户列表",
                    "path": 'users'
                  }]
              },
              {
                "id": 3,
                "authName": "电影信息管理",
                "path": null,
                "children": [
                  {
                    "id": 3-1,
                    "authName": "用户想看/收藏",
                    "path": 'AMovFav'
                  },
                  {
                    "id": 3-2,
                    "authName": "用户评论",
                    "path": 'AMovCom'
                  }
                ]
              },
              {
                "id": 4,
                "authName": "音乐信息管理",
                "path": null,
                "children": [
                  {
                    "id": 4-1,
                    "authName": "音乐/歌单喜欢",
                    "path": 'ASongLike'
                  },
                  {
                    "id": 4-2,
                    "authName": "歌单评论",
                    "path": 'AMusCom'
                  }
                ]
              }
            ],
            iconsObj: {
              '1':'el-icon-location',
              '2':'el-icon-user-solid',
              '3':'el-icon-film',
              '4':'el-icon-headset',
            }
          }
      },
      created() {
            this.activePath=window.sessionStorage.getItem('activePath')
      },
      methods:{
          logout(){
            window.sessionStorage.clear()
            this.$router.push('/admin')
          },
        toggleCollapse(){
            this.isCollapse=!this.isCollapse
        },
        saveActivepath(path){
            window.sessionStorage.setItem('activePath',path)
          this.activePath=path
        }
      }
    }
</script>

<style lang="less" scoped>
  .contain{
    padding: 0;
    height: 100%;
    margin: 0;
    .admin_ava{
      width: 50px;
      height: 50px;
border-radius: 50px;
    }
    .el-container{
      padding: 0;
    }
    .Admin_con{
      display: flex;
      flex-direction: row;
    }
  }
.el-header{
  background: #2c3e50;
}
.el-aside{
  overflow: hidden;
}
.header{
  display: flex;
  justify-content: space-between;
color: white;
  font-size: 30px;
  align-items: center;
  div{
    display: flex;
    align-items: center;
  }
  img{
    width: 50px;
    height: 50px;
    padding-right: 20px;
  }
}
  .el-aside{
    background: #2c3e50;
  }
  .toggle-button{
    color: #f0f0f0;

  }
  .el-menu{
    border-right:none ;
  }
  .el-menu-item{
    margin-left: 10px;
  }
  .el-main{
    background: #f0f0f0;
  }

</style>
